<template>
    <div class="container">
        <div style="text-align: center;">
            <img src="~assets/images/PHPlogo.png" alt="logo">
        </div>
        <div class="main">
            <form class="ant-form ant-form-horizontal">
                <div class="ant-form-item" style="row-gap:0px;">
                    <input placeholder="请输入账号" type="text" class="ant-input ant-input-lg">
                </div>
                <div class="ant-form-item" style="row-gap:0px;">
                    <input placeholder="请输入密码" type="password" class="ant-input ant-input-lg">
                </div>
                <div class="ant-form-item" style="row-gap:0px;">
                    <span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button">
                        <span class="ant-input-wrapper ant-input-group">
                            <input placeholder="请输入手机验证码" type="text" class="ant-input ant-input-lg">
                            <span class="ant-input-group-addon">
                                <button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button">
                                    <span>发送验证码</span>
                                </button>
                            </span>
                        </span>
                    </span>
                </div>
                <div class="ant-form-item" style="row-gap:0px;">
                    <button class="ant-btn ant-btn-primary ant-btn-block login-form-button" type="submit">
                        <span>注 册</span>
                    </button>
                </div>
                <div class="ant-form-item" style="row-gap:0px;float:right;">
                    <button class="ant-btn ant-btn-red login-form-button" type="submit" @click="go_url()">
                        <span>登 录</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
    setup() {
        const router = useRouter();
        const go_url = ()=>{
            router.push({
                path: "/login"
            });
        }
        return {
            go_url,
        };
    },
};
</script>
<style scoped>
.container {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 110px 0 144px;
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
}
img {
    vertical-align: middle;
    border-style: none;
    width: 200px;
}
.main {
    width: 368px;
    min-width: 260px;
    margin: 50px auto;
}
.ant-form {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
}
.ant-form-item {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
    margin-bottom: 24px;
    vertical-align: top;
}
.ant-btn {
    line-height: 1.5715;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    height: 32px;
    padding: 4px 15px;
    font-size: 14px;
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
    border-color: #d9d9d9;
}
.ant-btn-primary {
    color: #fff;
    background: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}
.ant-btn-block {
    width: 100%;
}
.ant-btn-red {
    color: #fff;
    background:#ff4d4f;
    border-color: #ff4d4f;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
}

.ant-input-group-wrapper {
    display: inline-block;
    width: 100%;
    text-align: start;
    vertical-align: top;
}
.ant-input-group {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    position: relative;
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.ant-input {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: tnum;
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    padding: 4px 11px;
    color: #000000d9;
    font-size: 14px;
    line-height: 1.5715;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all .3s;
}
.ant-input-lg {
    padding: 6.5px 11px;
    font-size: 16px;
}
.ant-input-group .ant-input {
    float: left;
    width: 100%;
    margin-bottom: 0;
    text-align: inherit;
}
.ant-input-search .ant-input-lg {
    line-height: 1.5713;
}
.ant-input-group>.ant-input:first-child, .ant-input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ant-input-group-addon, .ant-input-group-wrap {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
    vertical-align: middle;
}
.ant-input-group-addon {
    position: relative;
    padding: 0 11px;
    color: #000000d9;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all .3s;
}
.ant-input-group-addon:last-child {
    left: -1px;
    padding: 0;
    border: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ant-input-search-large .ant-input-search-button {
    height: 40px;
}
.ant-input-search-button {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0 2px 2px 0;
}
</style>
